<template>
  <h1>Android Retrace Tool</h1>
  <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
  <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->

  <el-tabs tab-position="left" style="height:100%" class="main-tabs">
    <el-tab-pane label="MappingUrl">
      <el-tabs v-model="mappingUrlActiveName" :before-leave="tabBeforeLeave" type="border-card">

        <el-tab-pane label="日志文本翻译(通过url)" name="retraceMappingUrl">
          <RetraceMappingUrl ref="RetraceMappingUrl" />
        </el-tab-pane>

        <el-tab-pane label="MappingUrl自动填充脚本" name="customMappingUrlScript">
          <CustomMappingUrlScript ref="CustomMappingUrlScript" />
        </el-tab-pane>
      </el-tabs>


    </el-tab-pane>
    <el-tab-pane label="MappingId">
      <el-tabs v-model="mappingIdActiveName" :before-leave="tabBeforeLeave" type="border-card">
        <el-tab-pane label="mapping.txt上传" name="mappingUpload">
          <MappingUpload ref="MappingUpload" />
        </el-tab-pane>
        <el-tab-pane label="日志文本翻译" name="retraceMappingId">
          <RetraceMappingId ref="RetraceMappingId" />
        </el-tab-pane>
        <el-tab-pane label="MappingId自动填充脚本" name="customMappingIdScript">
          <CustomMappingIdScript ref="CustomMappingIdScript" />
        </el-tab-pane>

      </el-tabs>
    </el-tab-pane>

  </el-tabs>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'
import { defineComponent } from "vue";
import MappingUpload from "./components/MappingUpload.vue";
import RetraceMappingId from "./components/RetraceMappingId.vue";
import RetraceMappingUrl from "./components/RetraceMappingUrl.vue";
import CustomMappingIdScript from "./components/CustomMappingIdScript.vue";
import CustomMappingUrlScript from "./components/CustomMappingUrlScript.vue";
// import { ref } from 'vue'

// const tabPosition = ref('left')

export default defineComponent({
  name: "App",
  components: {
    // HelloWorld,
    MappingUpload,
    RetraceMappingId,
    RetraceMappingUrl,
    CustomMappingIdScript,
    CustomMappingUrlScript,
  },
  data() {
    return {
      mappingUrlActiveName: "retraceMappingUrl",
      mappingIdActiveName: "retraceMappingId",
    };
  },
  methods: {
    tabBeforeLeave(activeName, oldActiveName) {
      //保持mappingUpload和retraceMappingId两个页面的mappingId一致
      let upload = this.$refs.MappingUpload.mappingId;
      let mapping = this.$refs.RetraceMappingId.mappingId;
      if ("mappingUpload" == oldActiveName) {
        this.$refs.MappingUpload.mappingId = upload;
        this.$refs.RetraceMappingId.mappingId = upload;
      }
      if ("retraceMappingId" == oldActiveName) {
        this.$refs.MappingUpload.mappingId = mapping;
        this.$refs.RetraceMappingId.mappingId = mapping;
      }
    },
  },
});
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.main-tabs>.el-tabs__content {
  padding-left: 8px;
  font-size: 16px;
}

.el-tabs--right .el-tabs__content,
.el-tabs--left .el-tabs__content {
  height: 100%;
}
</style>
